import Icon from '@/components/Icon'
import useInitialState from '@/hooks/useInitialState'
import { getUserChannel, changeActive, getAllChannel } from '@/store/actions/channel'
import { Popup, Tabs } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import ArticleList from './Components/ArticleList/ArticleList'
import Channels from './Components/Channels/Channels'

import styles from './index.module.scss'

const Home = () => {
  const history = useHistory()
  const dispatch = useDispatch()
  const [visible, setVisible] = useState(false)
  const hide = () => {
    setVisible(false)
  }
  const { userChannels, active } = useInitialState(getUserChannel, 'channel')

  // 获取所有的频道
  // useInitialState(getAllChannel, 'channel')
  useEffect(() => {
    dispatch(getAllChannel())
  }, [])

  const onChange = (id: string) => {
    console.log(id)
    dispatch(changeActive(id))
  }
  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      <Tabs className="tabs" activeKey={active} activeLineMode="fixed" onChange={onChange}>
        {
          userChannels.map(it => (<Tabs.Tab title={it.name} key={it.id}>
          <ArticleList channelId={it.id}/>
        </Tabs.Tab>))
        }
      </Tabs>

      <div className="tabs-opration">
        <Icon type="iconbtn_search" onClick={() => history.push('/search')}/>
        <Icon type="iconbtn_channel" onClick={() => setVisible(true)}/>
      </div>

      {/* 频道管理 */}
      <Popup position='left' visible={visible}>
        <Channels hide={hide}/>
      </Popup>
    </div>
  )
}

export default Home
